<!DOCTYPE html>
<html   lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
  
</head>
<body style=" overflow-y:auto; overflow-x:auto;height:800px;">
		 
		<div id="test" >
		欢迎使用本系统：
			  <span class="layui-badge-dot"></span>
			  <span class="layui-badge-dot layui-bg-orange"></span>
			  <span class="layui-badge-dot layui-bg-green"></span>
			  <span class="layui-badge-dot layui-bg-cyan"></span>
			  <span class="layui-badge-dot layui-bg-blue"></span>
			  <span class="layui-badge-dot layui-bg-black"></span>
			  <span class="layui-badge-dot layui-bg-gray"></span>
		</div>
		<hr  class="layui-bg-green" size="15px" />
		
		
		
		<div class="layui-carousel" id="test3" lay-filter="test4">
		  <div carousel-item="">
		    <div><img src="https://desk-fd.zol-img.com.cn/t_s1366x768c5/g4/M07/06/01/ChMlzF11ty6IIChEAAfXFdaRgnsAAXmqALl-DIAB9ct423.jpg"></div>
		    <div><img src="https://desk-fd.zol-img.com.cn/t_s1366x768c5/g1/M08/00/03/ChMljl11tzWINaiyABptiKj09icAAPvBAMCNfwAGm2g244.jpg"></div>
		    <div><img src="https://desk-fd.zol-img.com.cn/t_s1366x768c5/g4/M08/06/01/ChMly111t0mIHah5ABMNo16SlhgAAXmqQPjm-4AEw27505.jpg"></div>
		  </div>
		</div> 
		<hr  class="layui-bg-green" size="15px"/>

 <script th:src="@{/lib/newlayui/layui.js}" charset="utf-8"></script>
			<script>
					layui.use(['carousel','element', 'layer','form'], function(){
						 var element = layui.element;
						 var layer = layui.layer;
						  var carousel = layui.carousel
						  ,form = layui.form;

					//监听折叠
					  element.on('collapse(test)', function(data){
					    layer.msg('展开状态：'+ data.show);
					  });


					//改变下时间间隔、动画类型、高度
					  carousel.render({
					    elem: '#test3'
					    ,interval: 1800
					    ,anim: 'fade'
					    ,width: '100%'
					    ,height: '400px'
					  });


					  var $ = layui.$, active = {
					    set: function(othis){
					      var THIS = 'layui-bg-normal'
					      ,key = othis.data('key')
					      ,options = {};

					      othis.css('background-color', '#5FB878').siblings().removeAttr('style');
					      options[key] = othis.data('value');
					      ins3.reload(options);
					    }
					  };

					  //监听开关
					  form.on('switch(autoplay)', function(){
					    ins3.reload({
					      autoplay: this.checked
					    });
					  });

					  $('.demoSet').on('keyup', function(){
					    var value = this.value
					    ,options = {};
					    if(!/^\d+$/.test(value)) return;

					    options[this.name] = value;
					    ins3.reload(options);
					  });

					  //其它示例
					  $('.demoTest .layui-btn').on('click', function(){
					    var othis = $(this), type = othis.data('type');
					    active[type] ? active[type].call(this, othis) : '';
					  });
					});
			</script>



</body>
</html>